<script setup>
import {BorderBox11 as DvBorderBox11} from '@kjgl77/datav-vue3'
import {BorderBox1 as DvBorderBox1} from '@kjgl77/datav-vue3'
import {BorderBox10 as DvBorderBox10} from '@kjgl77/datav-vue3'
import {BorderBox8 as DvBorderBox8} from '@kjgl77/datav-vue3'
import {BorderBox13 as DvBorderBox13} from '@kjgl77/datav-vue3'
import {BorderBox5 as DvBorderBox5} from '@kjgl77/datav-vue3'
import {BorderBox9 as DvBorderBox9} from '@kjgl77/datav-vue3'
import LocationOfstudentCount from "../components/statistic/locationOfstudentCount.vue";
import OrdersStatistic from "../components/statistic/ordersStatistic.vue";
import {reactive, ref} from "vue";
import AcademyStudentCount from "../components/statistic/academyStudentCount.vue";
import GenderOfStudentCount from "../components/statistic/genderOfStudentCount.vue";
import Map from "../components/statistic/map.vue";
import ClubCount from "../components/statistic/clubCount.vue";
import BusinessCount from "../components/statistic/businessCount.vue";
import AddressPeople from "../components/statistic/addressPeople.vue";

</script>

<template>
  <div class="statisticAll">
    <!--大边框-->
    <dv-border-box11 title="智慧校园数据" :title-width="400" :animate="true" :color="['yellow']">
      <div dv-bg>
        <div class="one" style="display: flex;margin-left: 20px;">
          <div class="one_left" style="flex: 25%">
            <dv-border-box1 style="width: 100%;height: 200px;margin-top: 60px;">
              <div>
                <LocationOfstudentCount/>
              </div>
            </dv-border-box1>
            <dv-border-box8 style="width: 100%;height: 180px;">
              <div>
                <OrdersStatistic/>
              </div>
            </dv-border-box8>
          </div>
          <div class="one_center" style="flex: 50%">
            <dv-border-box10 style="width: 100%;height: 400px;margin-top: 60px;">
              <div>
                <Map/>
                <AddressPeople/>
              </div>
            </dv-border-box10>
          </div>
          <div class="one_right" style="flex: 25%">
            <dv-border-box11 title="学院学生人数"
                             style="width: 100%;height: 380px;margin-top: 30px;padding-top: 60px;">
              <div>
                <AcademyStudentCount/>
                <GenderOfStudentCount/>
              </div>
            </dv-border-box11>
          </div>
        </div>
        <!---->
        <div class="two" style="display: flex;width: 98%;margin: 0 auto;">
          <dv-border-box5 style="width: 50%;height: 220px;">
            <div dv-bg>
              <ClubCount/>
            </div>
          </dv-border-box5>
          <dv-border-box9 style="width: 50%;height: 220px;">
            <div dv-bg>
               <business-count/>
            </div>
          </dv-border-box9>
        </div>
      </div>
    </dv-border-box11>
  </div>
</template>

<style scoped>
.statisticAll {
  background-color: #475669;
  width: 100%;
  height: 100vh;
}
</style>
